<!-- 侧边菜单 -->
@props(['modules' => [], 'activeModule' => '', 'activeMenu' => ''])
            <aside :class="{
                       // 大屏幕：展开/收窄
                       'w-48': isLargeScreen && sidebarExpanded,
                       'w-20': isLargeScreen && !sidebarExpanded,

                       // 中等屏幕：展开/收窄
                       'w-48': isMediumScreen && !sidebarCollapsed,
                       'w-20': isMediumScreen && sidebarCollapsed,

                       // 小屏幕：显示/隐藏
                       'translate-x-0': isSmallScreen && sidebarVisible,
                       '-translate-x-full': isSmallScreen && !sidebarVisible,

                       // 定位和层级
                       'fixed': true,
                       'z-40': true
                   }"
       class="admin-sidebar bg-gray-800 text-gray-100 flex flex-col transition-all duration-300 ease-in-out inset-y-0 left-0 transform"
       :style="{
           width: (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed) ? '192px' :
                  (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed) ? '80px' :
                  isSmallScreen ? '192px' : '0px'
       }"
       @click.away="if(isSmallScreen && sidebarVisible) { sidebarVisible = false }"
       x-data="{
           localHoveredMenuItem: '',
           tooltipTarget: null,
           tooltipPosition: { top: 0, left: 0 },

           // 设置tooltip位置
           setTooltipPosition(event) {
               this.tooltipTarget = event.currentTarget;
               const rect = this.tooltipTarget.getBoundingClientRect();
               this.tooltipPosition = {
                   top: rect.top + rect.height / 2 - 20,
                   left: rect.right + 8
               };
           },

           // 判断是否应该显示tooltip
           shouldShowTooltip() {
               return (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed);
           }
       }">

    <!-- 侧边栏头部 -->
    <div class="h-16 flex items-center justify-between px-4 border-b border-gray-700">
        <!-- 标题 -->
        <span class="font-bold text-lg whitespace-nowrap"
              :class="{
                  'hidden': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                  'text-center': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)
              }">
            后台管理
        </span>

        <!-- 收窄状态下的短标题 -->
        <span class="font-bold text-lg"
              :class="{
                  'hidden': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                  'text-center': true
              }">
            管理
        </span>

        <!-- 小屏幕下的关闭按钮 -->
        <button x-show="isSmallScreen"
                @click="sidebarVisible = false"
                class="text-gray-400 hover:text-white focus:outline-none lg:hidden">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>

    <!-- 内容区域 -->
    <div class="flex-1 flex flex-col overflow-visible">
        <!-- 滚动区域 -->
        <div class="flex-1 overflow-y-auto overflow-x-visible py-4 px-2 space-y-2">
            @if(isset($modules[$activeModule]))
                @foreach($modules[$activeModule]['menus'] as $menu)
                    @if($menu['type'] == 'groupName')
                        <!-- 分组标题 -->
                        <h3 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider h-6 flex items-center"
                            :class="{
                                'text-center px-2': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                                'px-3': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                                'hidden': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)
                            }">
                            {{$menu['name']}}
                        </h3>

                        <!-- 收窄状态下的短分组标题 -->
                        <h3 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider text-center px-2 h-6 flex items-center justify-center"
                            :class="{
                                'hidden': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed)
                            }">
                            {{$menu['shortName'] ?? substr($menu['name'], 0, 1)}}
                        </h3>
                    @else
                        <!-- 菜单项 -->
                        <a hx-get="{{$menu['url']}}"
                           href="{{$menu['url']}}"
                           @click.prevent="activeMenu = '{{$activeModule . "." . $menu['flag']}}'"
                           hx-target="#content"
                           @mouseenter="if(shouldShowTooltip()) { localHoveredMenuItem = '{{$menu['name']}}'; setTooltipPosition($event); }"
                           @mouseleave="if(shouldShowTooltip()) { localHoveredMenuItem = ''; tooltipTarget = null; }"
                           class="relative flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out group my-1 h-10"
                           :class="{
                               'justify-center px-2': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                               'px-3': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                               'bg-gray-700': '{{$activeModule . "." . $menu['flag']}}' === activeMenu
                           }">

                            <!-- 图标 -->
                            <span class="h-6 w-6 icon-[{{$menu['icon']}}] flex-shrink-0"
                                  :class="{ 'mr-2': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed) }">
                            </span>

                            <!-- 菜单名称 -->
                            <span class="flex-shrink-0" :class="{
                                'hidden': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)
                            }">
                                {{$menu['name']}}
                            </span>
                        </a>
                    @endif
                @endforeach
            @endif
        </div>
    </div>

    <!-- Tooltip容器 -->
    <div class="fixed z-[9999] pointer-events-none">
        <div x-show="shouldShowTooltip() && localHoveredMenuItem && tooltipTarget"
             :style="{ left: tooltipPosition.left + 'px', top: tooltipPosition.top + 'px' }"
             class="absolute text-sm bg-gray-900 text-white rounded-md shadow-lg pointer-events-auto border border-gray-700 min-w-max"
             :class="{
                 'px-4 py-3': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                 'px-3 py-2': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed)
             }"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-x-1"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-1"
             x-text="localHoveredMenuItem">
        </div>
    </div>
</aside>
